<!DOCTYPE html>
<html lang=zh_CN>

<head>
    <meta charset=UTF-8>
    <title>日语口型操</title>
    <link rel=stylesheet href="css/release/screen-dist.css">
</head>

<body>
    <!-- 第一行 -->
    <div class=jm-container>
        <div class=jiaming-box> <span>あ</span> <span>え</span> <span>い</span> </div>
        <div class=jiaming-box> <span>あ</span> <span>お</span> <span>う</span> </div>
        <div class=jiaming-box> <span>あ</span> <span>え</span> <span>い</span> <span>う</span> </div>
        <div class=jiaming-box> <span>え</span> <span>お</span> <span>あ</span> <span>お</span> </div>
        <div class=jiaming-box> <span>あ</span> <span>い</span> <span>う</span> <span>え</span> <span>お</span> </div>
    </div>
    <!-- 第二行 -->
    <div class=jm-container>
        <div class=jiaming-box> <span>か</span> <span>け</span> <span>き</span> </div>
        <div class=jiaming-box> <span>か</span> <span>こ</span> <span>く</span> </div>
        <div class=jiaming-box> <span>か</span> <span>け</span> <span>き</span> <span>く</span> </div>
        <div class=jiaming-box> <span>け</span> <span>こ</span> <span>か</span> <span>こ</span> </div>
        <div class=jiaming-box> <span>か</span> <span>き</span> <span>く</span> <span>け</span> <span>こ</span> </div>
    </div>
    <!-- 第三行 -->
    <div class=jm-container>
        <div class=jiaming-box> <span>さ</span> <span>せ</span> <span>し</span> </div>
        <div class=jiaming-box> <span>さ</span> <span>そ</span> <span>す</span> </div>
        <div class=jiaming-box> <span>さ</span> <span>せ</span> <span>し</span> <span>す</span> </div>
        <div class=jiaming-box> <span>せ</span> <span>そ</span> <span>さ</span> <span>そ</span> </div>
        <div class=jiaming-box> <span>さ</span> <span>し</span> <span>す</span> <span>せ</span> <span>そ</span> </div>
    </div>
    <!-- 第四行 -->
    <div class=jm-container>
        <div class=jiaming-box> <span>た</span> <span>て</span> <span>ち</span> </div>
        <div class=jiaming-box> <span>た</span> <span>と</span> <span>つ</span> </div>
        <div class=jiaming-box> <span>た</span> <span>て</span> <span>ち</span> <span>つ</span> </div>
        <div class=jiaming-box> <span>て</span> <span>と</span> <span>た</span> <span>と</span> </div>
        <div class=jiaming-box> <span>た</span> <span>ち</span> <span>つ</span> <span>て</span> <span>と</span> </div>
    </div>
    <!-- 第五行 -->
    <div class=jm-container>
        <div class=jiaming-box> <span>な</span> <span>ね</span> <span>に</span> </div>
        <div class=jiaming-box> <span>な</span> <span>の</span> <span>ぬ</span> </div>
        <div class=jiaming-box> <span>な</span> <span>ね</span> <span>に</span> <span>ぬ</span> </div>
        <div class=jiaming-box> <span>ね</span> <span>の</span> <span>な</span> <span>の</span> </div>
        <div class=jiaming-box> <span>な</span> <span>に</span> <span>ぬ</span> <span>ね</span> <span>の</span> </div>
    </div>
    <!-- 第六行 -->
    <div class=jm-container>
        <div class=jiaming-box> <span>は</span> <span>へ</span> <span>ひ</span> </div>
        <div class=jiaming-box> <span>は</span> <span>ほ</span> <span>ふ</span> </div>
        <div class=jiaming-box> <span>は</span> <span>へ</span> <span>ひ</span> <span>ふ</span> </div>
        <div class=jiaming-box> <span>へ</span> <span>ほ</span> <span>は</span> <span>ほ</span> </div>
        <div class=jiaming-box> <span>は</span> <span>ひ</span> <span>ふ</span> <span>へ</span> <span>ほ</span> </div>
    </div>
    <!-- 第七行 -->
    <div class=jm-container>
        <div class=jiaming-box> <span>ま</span> <span>め</span> <span>み</span> </div>
        <div class=jiaming-box> <span>ま</span> <span>も</span> <span>む</span> </div>
        <div class=jiaming-box> <span>ま</span> <span>め</span> <span>み</span> <span>む</span> </div>
        <div class=jiaming-box> <span>め</span> <span>も</span> <span>ま</span> <span>も</span> </div>
        <div class=jiaming-box> <span>ま</span> <span>み</span> <span>む</span> <span>め</span> <span>も</span> </div>
    </div>
    <!-- 第八行 -->
    <div class=jm-container>
        <div class=jiaming-box> <span>や</span> <span>え</span> <span>い</span> </div>
        <div class=jiaming-box> <span>や</span> <span>よ</span> <span>ゆ</span> </div>
        <div class=jiaming-box> <span>や</span> <span>え</span> <span>い</span> <span>ゆ</span> </div>
        <div class=jiaming-box> <span>え</span> <span>よ</span> <span>や</span> <span>よ</span> </div>
        <div class=jiaming-box> <span>や</span> <span>い</span> <span>ゆ</span> <span>え</span> <span>よ</span> </div>
    </div>
    <!-- 第九行 -->
    <div class=jm-container>
        <div class=jiaming-box> <span>ら</span> <span>れ</span> <span>り</span> </div>
        <div class=jiaming-box> <span>ら</span> <span>ろ</span> <span>る</span> </div>
        <div class=jiaming-box> <span>ら</span> <span>れ</span> <span>り</span> <span>る</span> </div>
        <div class=jiaming-box> <span>れ</span> <span>ろ</span> <span>ら</span> <span>ろ</span> </div>
        <div class=jiaming-box> <span>ら</span> <span>り</span> <span>る</span> <span>れ</span> <span>ろ</span> </div>
    </div>
    <!-- 第十行 -->
    <div class=jm-container>
        <div class=jiaming-box> <span>わ</span> <span>え</span> <span>い</span> </div>
        <div class=jiaming-box> <span>わ</span> <span>を</span> <span>う</span> </div>
        <div class=jiaming-box> <span>わ</span> <span>え</span> <span>い</span> <span>う</span> </div>
        <div class=jiaming-box> <span>え</span> <span>を</span> <span>あ</span> <span>を</span> </div>
        <div class=jiaming-box> <span>わ</span> <span>い</span> <span>う</span> <span>え</span> <span>を</span> </div>
    </div>
    <!-- 以下为切换假名功能 -->
    <div class=jm-container>
        <button id=jmToggle class=toggle-button>
            <span>切换</span>
        </button>
    </div>
    <!-- js -->
    <script src="js/release/jquery-2.0.3.min.js"></script>
    <script src="js/release/toggle-dist.js"></script>
</body>

</html>